<template>
    <div class="container">
        <div class="header">
            <div class="group">
                <Button type="success" class="output-btn">数据导出</Button>
                <Input search placeholder="请输入证件号" style="margin-right: 10px; width: 200px;" />
                <DatePicker type="date" multiple placeholder="选择开始时间" style="width: 200px; margin-right: 5px;"></DatePicker>
                <DatePicker type="date" multiple placeholder="选择结束时间" style="width: 200px; margin-right: 10px;"></DatePicker>
            </div>
            <div class="total-num">总记录: 1条</div>
        </div>
        <!--<div class="op-frame">-->
            <!---->
        <!--</div>-->
        <div class="content">
            <Table width="100%" height="auto" border :columns="columns2" :data="data4"></Table>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      columns2: [
        {
          title: '状态',
          key: 'staus',
          width: 100,
          align: 'center',
          fixed: 'left',
          filters: [
            {
              label: '待提报',
              value: '待提报'
            },
            {
              label: '已提报',
              value: '已提报'
            },
            {
              label: '已审核',
              value: '已审核'
            },
            {
              label: '待审核',
              value: '待审核'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '待提报') {
              return row.staus === '待提报'
            } else if (value === '已提报') {
              return row.staus === '已提报'
            } else if (value === '已审核') {
              return row.staus === '已审核'
            } else if (value === '待审核') {
              return row.staus === '待审核'
            }
          }
        },
        {
          title: '姓名',
          key: 'name',
          width: 100,
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          width: 100,
          align: 'center',
          filters: [
            {
              label: '男',
              value: '男'
            },
            {
              label: '女',
              value: '女'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '男') {
              return row.sex === '男'
            } else if (value === '女') {
              return row.sex === '女'
            }
          }
        },
        {
          title: '年龄',
          key: 'age',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '证件类型',
          key: 'card_type',
          align: 'center',
          width: 150
        },
        {
          title: '证件号',
          key: 'card_no',
          align: 'center',
          width: 200
        },
        {
          title: '联系电话',
          key: 'tel',
          align: 'center',
          width: 150
        },
        {
          title: '密接时间',
          key: 'lssj',
          align: 'center',
          width: 150,
          sortable: true
        },
        {
          title: '密接方式',
          key: 'lsqx',
          align: 'center',
          width: 150
        },
        {
          title: '密接人现状',
          key: 'mddcs',
          align: 'center',
          width: 150
        },
        {
          title: '操作',
          align: 'center',
          key: 'action',
          fixed: 'right',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提报'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '审批'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '详情'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '发布')
            ])
          }
        }
      ],
      data4: [
        {
          staus: '待提报',
          name: '白文君',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '210102********0314',
          tel: '130****9990',
          lssj: '2020-03-25',
          lsqx: '疑似密接',
          mddcs: '无症状',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        }]
    }
  }
}
</script>

<style scoped>
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .op-frame {
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        display: flex;
    }
    .group {
        display: flex;
    }
    .output-btn {
        margin-right: 10px;
    }
</style>
